<template>
	<view class="index1_content">
		<view class="search-header">
			<view @click="handeleTo">
				<image style="width: 15rpx;height: 30rpx;" src="@/static/index2/index7.png" mode=""></image>
			</view>
			<view style="color: #FFFFFF;font-size: 32rpx;margin-right: 10rpx;">{{$t('货物入库')}}</view>
			<view></view>
		</view>
		<!-- 出入库选择 -->
		<!-- 		<view class="entry-select">
			<view @click="handeleItem(index)" :class="index==indexID?'entry-select-item':'entry-select-item-active'"
				v-for="(item,index) in arr" :key="index">{{$t(item)}}</view>
		</view> -->






		<!-- 模块 -->
		<view class="entry-block">
			<!-- 	<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('入库单号')}}</view>
				</view>
				<u-input v-model="formData.order_no" :placeholder="$t('请输入入库单号')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view> -->
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('客户名称')}}</view>
				</view>
				<u-input :maxlength="20" v-model="formData.name" :placeholder="$t('请输入客户名称')"
					style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
					input-align="right"></u-input>
			</view>


			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('存放仓库')}}</view>
				</view>
				<view style="display: flex;align-items: center;">
					<picker mode="selector" :range="wareHouse" range-key="name" @change="wareChange">
						<div class="flex">
							<view style="color:#999">{{currentWareHouseName}}</view>
							<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;"
								src="@/static/index2/index14.png" mode=""></image>
						</div>
					</picker>
				</view>
			</view>


			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('货位')}}</view>
				</view>
				<view style="display: flex;align-items: center;position: relative;">
					<view v-if="!formData.w_id" @click="toast($t('请先选择仓库'))"
						style="position: absolute;;width: 100%;height:100%;z-index: 9;"></view>
					<picker mode="selector" :range="storageList" range-key="name"
						@change="(e)=>{currentStoreName=storageList[e.detail.value].name;formData.storage_id=storageList[e.detail.value].id}">
						<div class="flex">
							<view style="color:#999">{{currentStoreName}}</view>
							<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;"
								src="@/static/index2/index14.png" mode=""></image>
						</div>
					</picker>
				</view>
			</view>

			<hr>

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('商品名称')}}</view>
				</view>
				<u-input :maxlength="30" v-model="formData.goods" :placeholder="$t('请输入商品名称')"
					style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
					input-align="right"></u-input>
			</view>

			<view class="new-block1">
				<view style="display: flex;align-items: center;flex-shrink: 0;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('货物尺寸')}}</view>
				</view>
				<div class="flex">
					<u-input type="number" v-model="formData.goods_l" :placeholder="$t('货物长度')"
						style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
						input-align="center"></u-input>
					<u-input type="number" v-model="formData.goods_w" :placeholder="$t('货物宽度')"
						style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
						input-align="center"></u-input>
					<u-input type="number" v-model="formData.goods_h" :placeholder="$t('货物高度')"
						style="margin-left: 50rpx;" placeholder-style="font-size: 24rpx;color: #999999;"
						input-align="center"></u-input>
				</div>
			</view>

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('通关服务')}}</view>
				</view>

				<picker mode="selector" :range="clearance" range-key="label"
					@change="(e)=>{currentClearance=clearance[e.detail.value].label;formData.clearance=clearance[e.detail.value].value}">
					<div class="flex">
						<view style="color:#999">{{currentClearance}}</view>
						<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
							mode=""></image>
					</div>
				</picker>

			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('通关口岸')}}</view>
				</view>

				<div class="flex">
					<CitySelect :text="currentPortCity"
						@confirm="(e)=>{formData.port_city=e.column3.value;currentPortCity=e.column3.label}" />
					<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
						mode=""></image>
				</div>
			</view>





			<view>
				<!-- 出发国家<br>
					出发城市<br>
					出发具体位置<br><br> -->

				<!-- 	<view class="new-block1">
					<view style="display: flex;align-items: center;">
						<image class="red" src="@/static/index2/index11.png"
							mode=""></image>
						<view>{{$t('商品类型')}}</view>
					</view>
					<view style="display: flex;align-items: center;">
						<picker mode="selector" :range="goodsType" range-key="label" @change="goodsTypeChange">
							<view style="color: #999999;">{{productType}}</view>
						</picker>
						<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
							mode=""></image>
					</view>
				</view>
				<view class="new-block1">
					<view style="display: flex;align-items: center;">
						<image class="red" src="@/static/index2/index11.png"
							mode=""></image>
						<view>{{$t('商品分类')}}</view>
					</view>
					<view style="display: flex;align-items: center;" @click="handeleGoodsClass(1)">
						<view style="color: #999999;">{{productClassification}}</view>
						<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
							mode=""></image>
					</view>
				</view>
				<view class="new-block1">
					<view style="display: flex;align-items: center;">
						<image class="red" src="@/static/index2/index11.png"
							mode=""></image>
						<view>{{$t('二级分类')}}</view>
					</view>
					<view style="display: flex;align-items: center;" @click="handeleGoodsClass(2)">
						<view style="color: #999999;">{{secondaryClassification}}</view>
						<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
							mode=""></image>
					</view>
				</view> -->
			</view>


			<hr>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('入库单价')}}</view>
				</view>
				<u-input v-model="formData.price" :placeholder="$t('请输入入库单价')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('货币类型')}}</view>
				</view>
				<view style="display: flex;align-items: center;" @click="handeleGoodsClass(3)">
					<view style="color: #999999;">{{currencyType}}</view>
					<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
						mode=""></image>
				</view>
			</view>
			<hr>

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('入库数量')}}</view>
				</view>
				<u-input v-model="formData.number" :placeholder="$t('请输入入库数量')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('数量单位')}}</view>
				</view>
				<view style="display: flex;align-items: center;" @click="handeleGoodsClass(4)">
					<view style="color: #999999;">{{quantityUnit}}</view>
					<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
						mode=""></image>
				</view>
			</view>

			<hr>

			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('单件重量(kg)')}}</view>
				</view>
				<u-input v-model="formData.weight" :placeholder="$t('请输入单件重量')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<view class="new-block1">
				<view style="display: flex;align-items: center;">
					<image class="red" src="@/static/index2/index11.png" mode=""></image>
					<view>{{$t('单件体积(m³)')}}</view>
				</view>
				<u-input v-model="formData.volume" :placeholder="$t('请输入单件体积')" style="margin-left: 50rpx;"
					placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"></u-input>
			</view>
			<view class="new-block2">
				<view style="width: 100%;height: 60rpx;line-height: 60rpx;">{{$t('入库商品图(最多3张)')}}</view>
				<!-- image  video-->
				<fileUploadVue :detail="isdisabled" :files.sync="formData.images" :max-count="3" file-type="image" />
			</view>
			<view class="new-block2">
				<view style="width: 100%;height: 60rpx;line-height: 60rpx;">{{$t('入库视频图(最多1张)')}}</view>
				<!-- image  video-->
				<fileUploadVue :detail="isdisabled" :files.sync="formData.videos" :max-count="1" file-type="video" />
			</view>
		</view>

		<view class="aaaa" @click="submit">{{$t('提交')}}</view>
		<view style="width: 100%;height: 80rpx;"></view>
		<!-- 商品一级分类 -->
		<u-picker @confirm="(event) => handeleConfirm(event, 1)" mode="selector" v-model="showOne"
			:default-selector="[this.oneMemory]" :range="sheetList" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:range-key="lang=='zh'?'name':'name_ru'" />
		<!-- 商品二级分类 -->
		<u-picker @confirm="(event) => handeleConfirm(event, 2)" mode="selector" v-model="showTow"
			:default-selector="[this.towMemory]" :range="sheetListTow" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:range-key="lang=='zh'?'name':'name_ru'" />
		<!-- 货币类型 -->
		<u-picker @confirm="(event) => handeleConfirm(event, 3)" mode="selector" v-model="showCurrency"
			:default-selector="[0]" :range="currencyTypes" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:range-key="lang=='zh'?'name':'name_ru'" />
		<u-picker @confirm="(event) => handeleConfirm(event, 4)" mode="selector" v-model="showUnits"
			:default-selector="[0]" :range="quantityUnits" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			:range-key="lang=='zh'?'name':'name_ru'" />
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>
	</view>
</template>

<script>
	import fileUploadVue from './components/fileUpload.vue'
	import CitySelect from './components/citySelect.vue'
	import validate from "./utils/validate.js"
	export default {
		components: {
			fileUploadVue,
			CitySelect
		},
		data() {
			return {

				goodsType: [{
						label: "中国货物",
						value: "1"
					},
					{
						label: "俄罗斯货物",
						value: "2"
					},
					{
						label: "在俄中国货物",
						value: "3"
					},
					{
						label: "在中俄罗斯货物",
						value: "4"
					},
				],
				formData: {
					user_id: uni.getStorageSync("user_id"), //用户id
					type: "", //0入库  1出库

					// order_no: "", //单号
					name: "", //客户名称
					w_id: "", //仓库

					goods: "", //商品名称

					goods_type: "", //商品类型
					//1=中国货物,2=俄罗斯货物,3=在俄中国货物,4=在中俄罗斯货物
					p_category_id: "", //商品分类
					category_id: "", //二级分类
					number_unit: "", //数量单位
					price_unit: "", //货币类型

					price: "", //单价
					number: "", //数量
					weight: "", //重量
					volume: "", //体积

					images: [], //入库图片
					videos: [], //入库视频
				},
				fields: {
					// goods_type: "商品类型",
					// p_category_id: "商品分类",
					// category_id: "二级分类",
					// order_no: "单号",
					goods: {
						title: this.$t("商品名称"),
						required: true,
						min: 2,
						max: 20
					},
					storage_id: {
						title: this.$t("货位"),
						required: true,
					},
					name: {
						title: this.$t("客户名称"),
						required: true,
						min: 2,
						max: 20
					},
					w_id: {
						title: this.$t("仓库"),
						required: true,
					},

					number_unit: {
						title: this.$t("数量单位"),
						required: true,
					},
					price_unit: {
						title: this.$t("货币类型"),
						required: true,
					},
					price: {
						title: this.$t("入库单价"),
						required: true,
						min: 1,
						max: 99999999
					},
					number: {
						title: this.$t("入库数量"),
						required: true,
						type: 'number',
						min: 1,
						max: 99999
					},
					weight: {
						title: this.$t("入库重量"),
						required: true,
						type: 'number',
						min: 1,
						max: 99999
					},
					volume: {
						title: this.$t("入库体积"),
						type: 'number',
						required: true,
						min: 1,
						max: 99999
					},
					goods_l: {
						title: this.$t("货物长度"),
						type: 'number',
						required: true,
						min: 1,
						max: 99999
					},
					goods_w: {
						title: this.$t("货物宽度"),
						type: 'number',
						required: true,
						min: 1,
						max: 99999
					},
					goods_h: {
						title: this.$t("货物高度"),
						type: 'number',
						required: true,
						min: 1,
						max: 99999
					},
					clearance: {
						title: this.$t("通关服务"),
						required: true,
					},
					port_city: {
						title: this.$t("通关口岸"),
						required: true,
					},
				},
				currentWareHouseName: this.$t("请选择仓库"),
				currentStoreName: this.$t("请选择货位"),
				currentClearance: this.$t("请选择通关服务"),
				currentPortCity: this.$t("请选择通关口岸"),
				warehouse: this.$t('请选择仓库'),
				productType: this.$t('请选择商品类型'),
				secondaryClassification: this.$t('请选择二级分类'),
				productClassification: this.$t('请选择商品分类'),
				quantityUnit: this.$t('请选择数量单位'),
				currencyType: this.$t('请选择货币类型'),

				currencyTypes: [{
						name: '元',
						name_ru: 'Юань'
					},
					{
						name: '卢布',
						name_ru: 'Руб.'
					},
				],
				oneMemory: 0, //一级分类当前选项下标
				towMemory: 0, //一级分类当前选项下标
				showOne: false,
				showTow: false,
				showCurrency: false,
				showUnits: false,
				isdisabled: false,
				model: {
					images: [],
					videos: [],
				},
				indexID: 0,
				arr: ['入库单', '出库单'],
				lang: 'zh',
				sheetList: [], //商品一级分类
				sheetListTow: [], //商品二级分类
				id: '',
				quantityUnits: [], //数量单位,
				wareHouse: [], //仓库列表
				storageList: [], //货位列表
				clearance: [{
						label: "报关",
						value: 1
					},
					{
						label: "清关",
						value: 2
					},
					{
						label: "报关+清关",
						value: 3
					},
				], //通关服务
				loading: false
			}
		},
		onShow() {
			this.getLang()
			// 商品一级分类
			this.getSheetList()
			this.getSheetListTow()
			// 单位
			this.getUnitList()

			this.getWareHouse();




		},
		methods: {
			goodsTypeChange(e) {
				this.productType = this.goodsType[e.detail.value].label
				this.formData.goods_type = this.goodsType[e.detail.value].value
			},
			submit() {
				if (this.loading) return

				if (!validate(this.fields, this.formData, this)) return


				//格式化部分参数
				const formData = JSON.parse(JSON.stringify(this.formData))
				formData.status = formData.status ? 1 : 0
				this.log(formData)

				if (formData.images.length != 0) {
					formData.images = formData.images.join(",")
				} else {
					delete formData.images
				}

				if (formData.videos.length != 0) {
					formData.videos = formData.videos.join(",")
				} else {
					delete formData.videos
				}
				uni.showLoading({
					title: this.$t("正在提交"),
					mask: true
				})
				this.loading = true
				this.$u.api.basic.stock_save(formData).then(res => {
					uni.showToast({
						title: res.create_at ? this.$t("操作成功") : this.$t("操作失败"),
						icon: res.create_at ? "success" : "error"
					})
					if (res.create_at) {
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack()
							this.loading = false
						}, 1500)
					} else {
						this.loading = false
					}
				})
			},
			wareChange(e) {
				this.currentWareHouseName = this.wareHouse[e.detail.value].name
				this.formData.w_id = this.wareHouse[e.detail.value].id
				//选择仓库清空历史选择货位
				this.currentStoreName = this.$t("请选择货位")
				this.formData.storage_id = null
				this.getStorage();
			},
			getWareHouse() {
				this.$u.api.basic.warehouse({
					user_id: uni.getStorageSync("user_id"),
					w_id: this.w_id,
					page: 1,
					limit: 9999
				}).then(res => {
					this.wareHouse = res.filter(item => item.status == 1);
				})
			},
			getStorage() {
				this.$u.api.basic.storage_lists({
					user_id: uni.getStorageSync("user_id"),
					w_id: this.w_id,
					page: 1,
					w_id: this.formData.w_id,
					limit: 9999
				}).then(res => {
					this.storageList = res;
				})
			},
			// 商品分类返回值
			handeleConfirm(event, param) {
				if (param == 1) { //一级分类
					this.oneMemory = event[0]
					this.id = this.sheetList[event[0]].id //id用来判断一级分类是否选择
					let id = this.sheetList[event[0]].id
					this.productClassification = this.sheetList[event[0]].name
					this.formData.p_category_id = this.sheetList[event[0]].id
					this.getSheetListTow(id)
				} else if (param == 2) { //二级分类
					this.towMemory = event[0]
					this.secondaryClassification = this.sheetListTow[event[0]].name
					this.formData.category_id = this.sheetListTow[event[0]].id
				} else if (param == 3) { //货币类型
					console.log('event:', event);
					console.log('param:', param);

					this.currencyType = this.currencyTypes[event[0]].name
					this.formData.price_unit = this.currencyTypes[event[0]].name

				} else if (param == 4) { //数量单位
					console.log('event:', event);
					console.log('param:', param);
					this.quantityUnit = this.lang == 'zh' ? this.quantityUnits[event[0]].name : this.quantityUnits[event[
						0]].name_ru
					this.formData.number_unit = this.lang == 'zh' ? this.quantityUnits[event[0]].name : this.quantityUnits[
						event[0]].name_ru
				}
			},
			//商品分类一级控制显示和隐藏
			handeleGoodsClass(i) {
				if (i == 1) {
					this.showOne = true
				} else if (i == 2) {
					if (this.id == '') {
						uni.showToast({
							icon: 'none',
							title: this.$t('一级类目不能为空')
						})
						return
					}
					this.showTow = true
				} else if (i == 3) {
					this.showCurrency = true
				} else if (i == 4) {
					this.showUnits = true
				}
			},
			// 商品一级分类
			getSheetList() {
				let data = {
					type: 'release_goods',
					pid: 0,
					needLogin: true,
					lang: this.lang,
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.sheetList = res
				})
			},
			// 商品二级分类
			getSheetListTow(id) {
				let data = {
					type: 'release_goods',
					pid: id,
					needLogin: true,
					lang: this.lang,
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.sheetListTow = res
				})
			},
			// 单位
			getUnitList() {
				this.$u.api.basic.getUnitList().then(res => {
					this.quantityUnits = res
				})
			},
			handeleItem(index) {
				this.indexID = index
			},
			// 返回上一页
			handeleTo() {
				uni.navigateBack()
			},
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	.aaaa {
		margin-top: 40rpx;
		width: 540rpx;
		height: 90rpx;
		border-radius: 50rpx;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.new-block2 {
		width: 100%;
		min-height: 160rpx;
		color: #1D1D1D;
		font-size: 24rpx;
	}

	.new-block1 {
		font-weight: normal;
		font-size: 24rpx;
		width: 100%;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D1D1D;
		border-bottom: 1rpx solid #D8D8D8;
	}

	.entry-block {
		z-index: 2;
		width: 690rpx;
		min-height: 1160rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 15rpx 30rpx 50rpx 30rpx;
		box-sizing: border-box;
	}

	.entry-select-item {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #5282E6;
		box-shadow: 0px 3.97px 9.92px 0px rgba(0, 76, 255, 0.3);
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.entry-select-item-active {
		width: 315rpx;
		height: 60rpx;
		border-radius: 60rpx;
		font-size: 24rpx;
		color: #000000;
		text-align: center;
		line-height: 60rpx;
	}

	.entry-select {
		z-index: 2;
		width: 690rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background: #FFFFFF;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search-header {
		z-index: 2;
		width: 690rpx;
		height: 133rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}

	.red {
		width: 11rpx;
		height: 11rpx;
		margin-right: 6rpx;
	}
</style>